<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	var g_vertexBuffer;
	function initVertexBuffers(gl){
		g_vertexBuffer = gl.createBuffer();
		if(!g_vertexBuffer){
			alert('createBuffer g_vertexBuffer fail');
			return false;
		}
		return true
	}

	var g_sizeBuffer;
	function initSizeBuffers(gl){
		g_sizeBuffer = gl.createBuffer();
		if(!g_sizeBuffer){
			alert('createBuffer g_sizeBuffer fail');
			return false;
		}
		return true
	}


	var Geometry1 = new Object();
	Geometry1.vertices = new Float32Array([
		0, 0.5, 10.0,  
		-0.5, -0.5, 20.0,
		0.5, -0.5,30.0]);

	Geometry1.VSHADER_SOURCE =
	'attribute vec4 a_Position;'+
	'attribute float a_PointSize;'+
	'uniform mat4 a_mat;'+
	'void main(){'+
	'gl_Position =  a_mat * a_Position;'+
	'gl_PointSize = a_PointSize;'+
	'}';

	Geometry1.FSHADER_SOURCE =
	'void main(){'+
	'gl_FragColor = vec4(1.0,0.0,0.0,1.0);'+
	'}';

    Geometry1.mat = new Matrix4();

    Geometry1.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry1 createProgram fail')
			return;
		}

    	this.a_mat = gl.getUniformLocation(this.program,'a_mat');	
		if (this.a_mat < 0) {
			alert('uniform Geometry1.a_mat fail');
			return false;
		}
    	this.a_Position = gl.getAttribLocation(this.program,'a_Position');
		if(this.a_Position <0){
			alert('attribute fail')
			return false;
		}
		
		this.a_PointSize = gl.getAttribLocation(this.program,'a_PointSize');
		if(this.a_PointSize <0){
			alert('attribute fail')
			return false;
		}

		return true;
    }

	Geometry1.draw = function(gl,frames){
		gl.useProgram(this.program);
		gl.bindBuffer(gl.ARRAY_BUFFER,g_vertexBuffer);
		gl.enableVertexAttribArray(this.a_Position);
		gl.enableVertexAttribArray(this.a_PointSize);

		gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);
		var Fsize = this.vertices.BYTES_PER_ELEMENT;
		gl.vertexAttribPointer(this.a_Position,2,gl.FLOAT,false,Fsize*3,0);
		gl.vertexAttribPointer(this.a_PointSize,1,gl.FLOAT,false,Fsize*3,Fsize*2);

		this.mat.setRotate(1,1,1,0);
		this.mat.rotate((frames%360),0,0,1);
		this.mat.scale(0.04 * (frames % 50) ,0.04*(frames % 50) ,0.04 *(frames % 50))
		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);
		gl.drawArrays(gl.POINTS,0,3);
		gl.bindBuffer(gl.ARRAY_BUFFER,null);
	}


	var Geometry2= new Object();
	Geometry2.vertices = new Float32Array([0, 0.1,   -0.1, -0.1,   0.1, -0.1 , 0.5,0.5]);
	Geometry2.pointsize = new Float32Array([
		5.0, 1.0,0.0,0.0,1.0, 
		10.0, 0.0,1.0,0.0,1.0, 
		4.0, 0.0,0.0,1.0,1.0, 
		100, 0.5,0.5,0.5,1.0, ]);
	Geometry2.VSHADER_SOURCE =
	'attribute vec4 c_Position;'+
	'attribute float a_PointSize;'+
	'attribute vec4 c_Color;'+
	'varying vec4 v_Color;'+
	'uniform mat4 a_mat;'+
	'void main(){'+
	'gl_Position =  a_mat * c_Position;'+
	'gl_PointSize = a_PointSize;'+
	'v_Color = c_Color;'+
	'}';
	Geometry2.FSHADER_SOURCE =
	'precision mediump float;'+
	'varying vec4 v_Color;'+
	//'uniform vec4 u_Color;'+
	'void main(){'+
	// 'gl_FragColor = u_Color;'+
	'gl_FragColor = v_Color;'+
	'}';

    Geometry2.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry2 createProgram fail')
			return;
		}

    	this.a_mat = gl.getUniformLocation(this.program,'a_mat');	
		if (!this.a_mat) {
			alert('uniform Geometry2.a_mat fail');
			return false;
		}
    	this.c_Position = gl.getAttribLocation(this.program,'c_Position');
		if(this.c_Position <0){
			alert('attribute c_Position fail')
			return false;
		}
	
		this.c_PointSize = gl.getAttribLocation(this.program,'a_PointSize');
		if(this.c_PointSize <0){
			alert('attribute c_PointSize fail')
			return false;
		}
		

		this.c_Color = gl.getAttribLocation(this.program,'c_Color');
		if(this.c_Color <0){
			alert('attribute c_Color fail')
			return false;
		}
		

		// this.u_Color = gl.getUniformLocation(this.program,'u_Color');
		// if(!this.u_Color){
		// 	alert('u_Color fail');
		// 	return;
		// }
		return true;
    }
	Geometry2.mat = new Matrix4();
	Geometry2.draw = function(gl,frames){
		gl.useProgram(this.program);
		gl.bindBuffer(gl.ARRAY_BUFFER,g_vertexBuffer);
		gl.enableVertexAttribArray(this.c_Position);

	    gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);
	    gl.vertexAttribPointer(this.c_Position,2,gl.FLOAT,false,0,0);


	    var Fsize = this.pointsize.BYTES_PER_ELEMENT;

	    gl.bindBuffer(gl.ARRAY_BUFFER,g_sizeBuffer);
	    gl.enableVertexAttribArray(this.c_PointSize);
	    gl.enableVertexAttribArray(this.c_Color);

	    gl.bufferData(gl.ARRAY_BUFFER,this.pointsize,gl.STATIC_DRAW);
	    gl.vertexAttribPointer(this.c_PointSize,1,gl.FLOAT,false,Fsize*5,0);
	    gl.vertexAttribPointer(this.c_Color,4,gl.FLOAT,false,Fsize*5,Fsize);

		this.mat.setRotate(1,1,1,0);
		this.mat.rotate((frames%360),0,0,1);

		//this.mat.scale(0.04 * (frames % 50) ,0.04*(frames % 50) ,0.04 *(frames % 50))
		   
		//gl.uniform4f(this.u_Color, 0.0,0.0,1.0,1.0);
		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);
		gl.drawArrays(gl.TRIANGLE_FAN,0,4);
		gl.bindBuffer(gl.ARRAY_BUFFER,null);
	}

	function start () {
		var canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}

		if (!initVertexBuffers(gl)){
			alert('initVertexBuffers fail');
			return;
		}

		if (!initSizeBuffers(gl)){
			alert('initSizeBuffers fail');
			return;
		}


		if(!Geometry1.initShader(gl)){
			alert('Geometry1 initShaderParm fail')
			return;
		}


		if(!Geometry2.initShader(gl)){
			alert('Geometry2 initShaderParm fail')
			return;
		}
		var frames = 0
		function renderer(){
			frames++;
			render(gl,frames);
			requestAnimationFrame(renderer)
		}
		renderer()
	}

	function render(gl,frames){
		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		Geometry1.draw(gl,frames);
		Geometry2.draw(gl,frames);		
	}



</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>